<!--
Copyright 2017 The Kubernetes Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<kd-card
  [expandable]="false"
  role="inner-content"
>
  <div
    title
    fxLayout="row"
    fxLayoutAlign="start center"
    fxLayoutGap="8px"
    fxFlex="100"
  >
    <span i18n>Logs from</span>
    <mat-form-field>
      <mat-select
        [(ngModel)]="container"
        (selectionChange)="onContainerChange()"
      >
        <mat-optgroup
          label="Containers"
          i18n-label
          *ngIf="logSources?.containerNames?.length > 0"
        >
          <mat-option
            *ngFor="let item of logSources?.containerNames"
            [value]="item"
          >
            {{ item }}
          </mat-option>
        </mat-optgroup>
        <mat-optgroup
          label="Init Containers"
          i18n-label
          *ngIf="logSources?.initContainerNames?.length > 0"
        >
          <mat-option
            *ngFor="let item of logSources?.initContainerNames"
            [value]="item"
          >
            {{ item }}
          </mat-option>
        </mat-optgroup>
      </mat-select>
    </mat-form-field>

    <span i18n>in</span>
    <mat-form-field>
      <mat-select
        [(ngModel)]="pod"
        (selectionChange)="loadNewest()"
      >
        <mat-option
          *ngFor="let item of logSources?.podNames"
          [value]="item"
        >
          {{ item }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <div fxFlex></div>

    <button
      fxFlexAlign="center end"
      mat-icon-button
      i18n-matTooltip
      matTooltip="Download logs"
      (click)="downloadLog()"
    >
      <mat-icon>file_download</mat-icon>
    </button>
    <button
      fxLayoutAlign="center end"
      mat-icon-button
      [matMenuTriggerFor]="kdMenu"
    >
      <mat-icon>more_vert</mat-icon>
    </button>
  </div>

  <div
    content
    #logViewContainer
    class="kd-log-line-container"
    (scroll)="onLogsScroll()"
    [ngClass]="{'kd-logs-text-color-invert': logService?.getInverted()}"
  >
    <div
      kdLoadingSpinner
      [isLoading]="isLoading"
    ></div>
    <div
      fxFlex
      fxLayout="column"
      fxLayoutGap="2px"
    >
      <div
        *ngFor="let item of logsSet"
        [ngClass]="{'kd-logs-element-compact': logService.getCompact(), 'kd-logs-element': !logService.getCompact()}"
      >
        <span>{{ item | kdStripAnsi | kdUntrim }}</span>
      </div>
    </div>
  </div>

  <div
    footer
    fxFlex
    fxLayoutAlign="start center"
    class="footer"
    fxLayout="row"
  >
    <div
      *ngIf="logsSet?.length > 1"
      i18n
    >
      Logs from
      <kd-date
        [date]="podLogs?.info.fromDate"
        format="short"
      >
      </kd-date>
      to
      <kd-date
        [date]="podLogs?.info.toDate"
        format="short"
      >
      </kd-date>
    </div>

    <div fxFlex></div>

    <div>
      <button
        mat-icon-button
        (click)="loadOldest()"
      >
        <mat-icon>first_page</mat-icon>
      </button>
      <button
        mat-icon-button
        (click)="loadOlder()"
      >
        <mat-icon>chevron_left</mat-icon>
      </button>
      <button
        mat-icon-button
        (click)="loadNewer()"
      >
        <mat-icon>chevron_right</mat-icon>
      </button>
      <button
        mat-icon-button
        (click)="loadNewest()"
      >
        <mat-icon>last_page</mat-icon>
      </button>
    </div>
  </div>
</kd-card>

<mat-menu #kdMenu="matMenu">
  <button
    mat-menu-item
    (click)="onTextColorChange()"
  >
    <mat-icon>{{ logService?.getInverted() ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
    <span i18n>Invert colors</span>
  </button>
  <button
    mat-menu-item
    (click)="onFontSizeChange()"
  >
    <mat-icon>{{ logService.getCompact() ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
    <span i18n>Reduce font size</span>
  </button>
  <button
    mat-menu-item
    (click)="onShowTimestamp()"
  >
    <mat-icon>{{ logService.getShowTimestamp() ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
    <span i18n>Show timestamps</span>
  </button>
  <button
    mat-menu-item
    (click)="toggleLogAutoRefresh()"
  >
    <mat-icon>{{ logService.getAutoRefresh() ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
    <span i18n>Auto-refresh (every {{ refreshInterval }} s.)</span>
  </button>
  <button
    mat-menu-item
    (click)="onPreviousChange()"
  >
    <mat-icon>{{ logService.getPrevious() ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>
    <span i18n>Show previous logs</span>
  </button>
</mat-menu>
